<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>久零贝统计</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content  animated fadeInRight" id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <div class="toolbar">
                <div id="toolbar">
                  </div>
            </div>
            <span id="spancc" class="spancc"></span>
            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索条件</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="row">
                            <div class="col-md-2"><input placeholder="用户手机号" id="search_customer" class="form-control"></div>
                            <div class="col-md-2"><input placeholder="开始日期" id="search_startdate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></div>
                            <div class="col-md-2"><input placeholder="结束日期" id="search_enddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></div>
                            <div class="col-md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button></div>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="row">
                            <div class="col-md-2"><i id="ljczjlb"  style="margin-left: -20px;" class="glyphicon glyphicon-usd">累计充值久零贝：0.0 </i></div>
                            <div class="col-md-2"><i id="ljzsjlb"  style="margin-left: -20px;" class="glyphicon glyphicon-yen">累赠送久零贝：0.0 </i></div>
                            <div class="col-md-2"><i id="czyhl"  style="margin-left: -20px;" class="glyphicon glyphicon-list-alt">充值用户量：0</i></div>
                            <div class="col-md-2"><i id="jlbjyl" style="margin-left: -20px;" class="glyphicon glyphicon-credit-card">久零贝交易量：0.0 </i></div>
                            <div class="col-md-2"><i id="jlbjybs"  style="margin-left: -20px;" class="glyphicon glyphicon-list-alt">交易笔数：0 </i></div>

                        </div>
                    </div>
                </div>
            </div>
            <table id="exampleTablePagination"></table>
        </div>
    </div>
</div>
    <script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
    <script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
    <script>

    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript">
        //初始化表格对象
        var $table = $('#exampleTablePagination');
        loadJLBInfo();


        ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

        $table.bootstrapTable({
            url: "${pageContext.request.contextPath}/baseDetail/showCoinStatistics.ac",
            method: 'post',
            contentType: "application/x-www-form-urlencoded",//必须的
            dataType: "json",
            pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
            height: ($(window).height()-200) ,
            //cardView:true,//是否自适应手机
            pagination: true, //分页
            // queryParamsType: "limit",
            singleSelect: false,
            cache:false,
            sortName:"name",
            search: false, //显示搜索框
            showColumns:false,
            showRefresh:false,
            showToggle:false,
            showPaginationSwitch:false,
            smartDisplay:true,
            detailView:false,
            toolbar:"#toolbar",
            queryParams: queryParams,//参数
            searchOnEnterKey:true,
            detailFormatter:function(index, row, element){
                return row.customer;
            },
            sidePagination: "server", //服务端处理分页
            columns: [
                {
                    visible:false,
                    field:'userId'
                },
                {
                    title: '会员昵称',
                    field: 'personName',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                }, {
                    title: '手机号码',
                    field: 'phone',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },
                {
                    title: '久零贝余额',
                    field: 'coinAll',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },  {
                    title: '充值金额',
                    field: 'chargeAmount',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },  {
                    title: '赠送金额',
                    field: 'giveAmount',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },
                {
                    title: '交易金额',
                    field: 'orderAmount',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                },
                {
                    title: '交易笔数',
                    field: 'orderCount',
                    titleTooltip: '点击可以进行排序操作',
                    sortStable:true,
                    align: 'center'
                }
            ]
        });

        /*
         搜索按钮
         */
        $("#btn_search").click(function(){
            $table.bootstrapTable('selectPage', 1);
            $table.bootstrapTable('refresh', queryParams);
            loadJLBInfo();
        });

        /*
         传递的参数
         */
        function queryParams(params) {
            var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,  //页面大小
                offset: params.offset, //页码
                pageindex:params.pageNumber,
                customer: $("#search_customer").val(),
                start: $("#search_startdate").val(),
                end: $("#search_enddate").val()

            };
            return temp;
        }
        ///////////////////////////////////////////////////////////////toolbar///////////////////////////////////////

function  doReload() {
    $table.bootstrapTable('selectPage', 1);
    $table.bootstrapTable('refresh', queryParams);

}

        function loadJLBInfo(){
         var   customer= $("#search_customer").val();
            var  start= $("#search_startdate").val();
            var  end= $("#search_enddate").val();
            $.ajax( {
                url:'${pageContext.request.contextPath}/baseDetail/loadJLBInfo.ac',// 跳转到 action
                data:{customer:customer,start:start,end:end},
                type:'post',
                cache:false,
                dataType:'json',
                success:function(data) {
                    $("#ljczjlb").html("累计充值久零贝："+data.rechargeAll);
                    $("#ljzsjlb").html("累计赠送久零贝："+data.giveAll);
                    $("#czyhl").html("充值用户量："+data.rechargeCount);
                    $("#jlbjyl").html("久零贝交易量："+data.orderAll);
                    $("#jlbjybs").html("交易笔数："+data.orderCount);
                },
                error : function() {
                    alert("加载自动发券汇总失败！");
                }
            });
        }
    </script>
</body>


</html>
